@use "@/common/styles/colors"

.audit-filters
  background: colors.$dark-gray
  border: 1px solid colors.$gray
  border-radius: 12px
  margin-bottom: 1.5rem
  overflow: hidden

  .filters-header
    display: flex
    align-items: center
    justify-content: space-between
    padding: 1rem 1.25rem
    cursor: pointer
    transition: all 0.2s ease

    @media (max-width: 768px)
      padding: 0.75rem 1rem

    @media (max-width: 480px)
      padding: 0.75rem

    &.expanded
      border-bottom: 1px solid colors.$gray

    &:hover
      background-color: colors.$gray

    .filters-title
      display: flex
      align-items: center
      gap: 0.75rem
      color: colors.$white
      font-size: 1rem
      font-weight: 600

      @media (max-width: 480px)
        font-size: 0.9rem
        gap: 0.5rem

      svg
        width: 1.25rem
        height: 1.25rem
        color: colors.$primary

        @media (max-width: 480px)
          width: 1rem
          height: 1rem

    .filter-count
      background-color: colors.$primary-opacity
      color: colors.$primary
      font-size: 0.8rem
      font-weight: 500
      padding: 0.25rem 0.75rem
      border-radius: 12px
      text-transform: uppercase

      @media (max-width: 480px)
        font-size: 0.7rem
        padding: 0.2rem 0.5rem

  .filters-content
    padding: 1.25rem

    @media (max-width: 768px)
      padding: 1rem

    @media (max-width: 480px)
      padding: 0.75rem

  .filters-row
    display: grid
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
    gap: 1.25rem
    margin-bottom: 1.25rem

    @media (max-width: 768px)
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))
      gap: 1rem
      margin-bottom: 1rem

    @media (max-width: 480px)
      grid-template-columns: 1fr
      gap: 0.75rem
      margin-bottom: 0.75rem

    &:last-child
      margin-bottom: 0

    .filter-group
      display: flex
      flex-direction: column
      gap: 0.5rem

      label
        font-size: 0.85rem
        color: colors.$subtext
        font-weight: 600
        text-transform: uppercase

        @media (max-width: 480px)
          font-size: 0.8rem

      .date-input
        padding: 0.75rem 1rem
        border: 1px solid colors.$gray
        border-radius: 8px
        background: colors.$darker-gray
        color: colors.$white
        font-size: 0.9rem
        outline: none
        transition: border-color 0.2s ease

        @media (max-width: 480px)
          padding: 0.65rem 0.85rem
          font-size: 0.85rem

        &:focus
          border-color: colors.$primary

        &::-webkit-calendar-picker-indicator
          filter: invert(1)
          cursor: pointer

      &.filter-actions
        justify-content: flex-end
        align-items: flex-end

        @media (max-width: 480px)
          justify-content: stretch
          align-items: stretch
